<template>
  <div class="flex">
    <p class="bg-info text-center" style="padding: 8px;">参数管理
      <span class="btn btn-link add-postition" @click="add('t_parameter')">新增</span>
    </p>
    <div class="form-inline auto" style="margin-bottom: 5px;">
      <label for="">参数名称：</label>
      <input type="text" class="form-control"  placeholder='请输入查找的参数名' v-model="param" @keyup.enter="filterParams(param)">
      <button class="btn btn-primary" @click="filterParams(param)">查询</button>
    </div>
    <div class="span">
      <partial-view v-ref:params-load>
        <data-grid :model="model" v-ref:params @select-changed="selected" >
          <template partial='head'>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>操作</th>
            </tr>
          </template>
          <template partial='body'>
            <td>{{$index+1}}</td>
            <td>{{row.name}}</td>
            <td class="flex-around">
              <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.modifyParam(row)">修改</button>
              <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.deleteParam(row)">删除</button>
            </td>
          </template>
        </data-grid>
      </partial-view>
    </div>

    <p v-if="selectItem" class="bg-info text-center" style="padding: 8px;margin: 8px 0px;">
      {{selectItem.name}}
      <span class="btn btn-link add-postition" @click="add('t_paramvalue')">新增</span>
    </p>
    <div v-if="selectItem" class="span">
      <partial-view v-ref:selects-load>
        <data-grid :model="params" v-ref:selects >
          <template partial='head'>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>操作</th>
            </tr>
          </template>
          <template partial='body'>
            <td>{{$index+1}}</td>
            <td>{{row.name}}</td>
            <td class="flex-around">
              <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.modifyParam(row)">修改</button>
              <button type="button" name="button" class="btn btn-link" @click.stop="$parent.$parent.$parent.deleteParam(row, $index)">删除</button>
            </td>
          </template>
        </data-grid>
      </partial-view>
    </div>

    <modal :show.sync="show" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">参数配置</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="from-group">
          <label for="">参数名称</label>
          <input type="text" class="form-control" v-model="modifyItem.name" @keyup.enter="confirm">
        </div>

      </article>

      <footer slot="modal-footer" class="modal-footer">
        <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
        <button v-show="show" type="button" class="btn btn-success" @click='confirm'>确认</button>
      </footer>
    </modal>
  </div>
</template>
<script>
import AppData from '../../../../stores/AppData'

export default {
  title: '用户操作',
  data () {
    return {
      allParams: null,  // 获取到所有的参数
      model: {  // 参数列表显示的数据
        rows: []
      },
      selectItem: null, // 选择的参数
      params: { // 选择的参数的具体内容
        rows: []
      },
      selectContent: null, // 选中的一条数据（包含参数或参数的具体内容）
      modifyItem: {
        name: ''
      }, // 要修改的参数
      show: false, // 是否显示添加修改模态框
    }
  },
  ready () {
    this.model.rows = Object.keys(AppData.params)
    this.loadParams()
  },
  methods: {
    // 加载全部参数
    loadParams () {
      this.$refs.paramsLoad.load('rs/sql/hql/simpleHql', {data: {tablename: 't_parameter'}}).then((res) => {
        this.model.rows = this.allParams = res.data
      })
    },
    selected (val) {
      this.selectItem = val.val
      this.params.rows = val.val.f_paramvalues
    },
    filterParams (param) {
      this.selectItem = null
        if (param && param !== "") {
          this.model.rows = this.allParams.filter((item) => {
            return item.name.includes(param)
          })
        }else {
          this.model.rows = this.allParams
        }
    },
    // 添加参数或添加参数内容
    add (type) {
      this.show = true
      this.modifyItem.EntityType = type
    },
    // 修改参数或添加参数内容
    modifyParam (row) {
      this.show = true
      this.selectContent = row
      this.modifyItem.name = row.name
      this.modifyItem.id = row.id
      this.modifyItem.EntityType = row.EntityType
      // this.tempName = row.name
    },
    // 删除
    deleteParam (row, index) {
      if (row.EntityType === 't_parameter') {
        this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            this.$refs.paramsLoad.load('rs/logic/deleteParam', row).then((res) => {
              this.loadParams()
              this.selectItem = null
            })
          }
        })
      } else if (row.EntityType === 't_paramvalue') {
        this.$showMessage('删除后不可恢复，确认删除吗？', ['confirm', 'cancel']).then((res) => {
          if (res === 'confirm') {
            this.$refs.selectsLoad.load('rs/logic/deleteValue', {tablename: 't_paramvalue', id: row.id}).then((res) => {
              this.params.rows.splice(index, 1)
            })
          }
        })
      }
    },
    // 修该内容的提交
    confirm () {
      let data = {}
      if (this.modifyItem.EntityType === 't_parameter') {
        // 有id为修改
        if (this.modifyItem.id) {
          data = {
            id: this.modifyItem.id,
            name: this.modifyItem.name
          }
        } else { // 否则为新增
          data = {
            name: this.modifyItem.name
          }
        }
        this.$refs.paramsLoad.load('rs/entity/t_parameter', data).then((res) => {
          this.loadParams()
          this.show = false
          this.modifyItem = {name: ''}
        })
      } else if (this.modifyItem.EntityType === 't_paramvalue') {
        if (this.modifyItem.id) {
          data = {
            id: this.modifyItem.id,
            name: this.modifyItem.name,
            processid: this.modifyItem.processid
          }
        } else {
          data = {
            name: this.modifyItem.name,
            processid: this.selectItem.id
          }
        }
        this.$refs.selectsLoad.load('rs/entity/t_paramvalue', data).then((res) => {
          this.show = false
          // 如果没有id，需要在数组中添加
          if (!data.id) {
            this.params.rows.push({id: res.data.id, name: this.modifyItem.name, processid: this.selectItem.id, EntityType: 't_paramvalue'})
          }else {
            this.selectContent.name = data.name
          }
          this.modifyItem = {name: ''}
        })
      }
    },
    // 关闭模态框, 数据还原
    close () {
      this.show = false
      this.modifyItem = {name: ''}
    }
  }

}
</script>
